<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>添加商品</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="../../../component/elementUI/index.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css" />
  <link rel="stylesheet" href="../../../style/index.css" />
  <style>
    .el-descriptions-item__label {
      width: 100px;
    }

    .Sort {
      position: absolute;
      right: 5px;
      bottom: 5px;
      color: #67c23a;
    }

    .el-tabs--border-card {
      box-shadow: none;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    .el-input__icon:hover {
      color: #409eff;
    }

    #group_detail {
      display: flex;
    }

    #group_detail .el-form-item__label {
      flex-shrink: 0;
    }

    #group .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 110px;
    }

    .upload_file.none .el-upload {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak class="minWidth">
    <yl-page-header content="修改商品"></yl-page-header>
    <div v-if="loading" style="
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 9000;
        " v-loading="loading" element-loading-text="更新商品数据中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"></div>
    <el-form :model="form" :rules="rules" ref="contract" inline-message="true" style="width: 100%">
      <div class="table_titel">
        <div class="titel">修改商品</div>
      </div>
      <el-descriptions :column="3" border size="small">
        <el-descriptions-item label="商品名称">
          <el-form-item prop="Article_Name">
            <el-input clearable v-model.trim="form.Article_Name" placeholder="请输入商品名称"></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="品种">
          <el-form-item prop="VarietyID">
            <el-select v-model="VarietyID" @change="handleChange" filterable placeholder="请选择品种" class="kuang"
              style="width: 100%">
              <el-option v-for="item in iJSONArray_Variety" :key="item.VarietyID" :label="item.VarietyName"
                :value="item.VarietyID">
              </el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="等级">
          <el-form-item prop="GradeID">
            <el-select v-model="GradeID" placeholder="请选择等级" class="kuang" style="width: 100%">
              <el-option v-for="item in iJSONArray_VarietyGrade" :key="item.GradeID" :label="item.GradeName"
                :value="item.GradeID">
              </el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="商品品牌">
          <el-form-item prop="Brand_SerialNumber">
            <el-select clearable v-model.trim="form.Brand_SerialNumber" placeholder="请选择商品品牌" filterable
              style="width: 100%">
              <el-option v-for="(item,index) in brand" :key="index" :label="item.Brand_Name"
                :value="item.Brand_SerialNumber"></el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="商品类型">
          <el-form-item prop="Category_SerialNumber">
            <el-select clearable v-model.trim="form.Category_SerialNumber" placeholder="请选择商品类型" filterable
              style="width: 100%">
              <el-option v-for="(item,index) in category" :key="index" :label="item.Category_Name"
                :value="item.Category_SerialNumber"></el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="包装信息">
          <el-form-item prop="is_Article_Type">
            <el-select clearable v-model.trim="is_Article_Type" placeholder="请选择包装信息" filterable style="width: 100%">
              <el-option v-for="(item,index) in article_info" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="封面图">
          <el-form-item prop="Picture_URL">
            <el-upload :limit="1" :file-list="fileList" :class="['upload_file', {'none': fileList?.length }]"
              list-type="picture-card" :before-upload="handleBeforeUpload" :on-change="chandleChange"
              :on-remove="fhandleRemove">
              <i class="el-icon-plus"></i>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <!-- 节点 -->
      <div class="table_titel">
        <div class="titel">收款节点</div>
      </div>
      <el-descriptions :column="7" border size="small">
        <el-descriptions-item label="定金">
          <el-form-item prop="dj">
            <el-input v-model="dj.Payment_Ratio" placeholder="请输入定金额度比"></el-input>
            <el-input v-model="dj.Excepted_Days" placeholder="请输入定金付款时期"></el-input>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="8" border size="small">
        <el-descriptions-item label="发货">
          <el-form-item prop="fh">
            <el-input v-model="fh.Payment_Ratio" placeholder="请输入发货额度比"></el-input>
            <el-input v-model="fh.Excepted_Days" placeholder="请输入发货付款时期"></el-input>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="9" border size="small">
        <el-descriptions-item label="到货">
          <el-form-item prop="dh">
            <el-input v-model="dh.Payment_Ratio" placeholder="请输入到货额度比"></el-input>
            <el-input v-model="dh.Excepted_Days" placeholder="请输入到货付款时期"></el-input>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="10" border size="small">
        <el-descriptions-item label="尾款">
          <el-form-item prop="wk">
            <el-input v-model="wk.Payment_Ratio" placeholder="请输入尾款额度比"></el-input>
            <el-input v-model="wk.Excepted_Days" placeholder="请输入尾款付款时期"></el-input>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <div class="table_titel">
        <div class="titel">商品规格</div>
        <div class="operation">
          <el-button type="primary" size="small" @click="add_article_specifications">新增</el-button>
          <el-button type="danger" size="small" @click="remove_article_specifications">删除</el-button>
        </div>
      </div>
      <!-- 规格 -->
      <el-table :data="business_article_specifications" stripe border style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column align="center" min-width="140" prop="Specifications_Name" label="规格">
          <template v-slot="{row, column, $index}">
            <el-input v-model.trim="row.Specifications_Name" @input="changeSpecificationsName($index)"
              placeholder="请输入规格"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="规格图片" width="180">
          <template v-slot="scope">
            <el-upload :data="scope.$index" :limit="1" list-type="picture-card" :file-list="showFileList(scope.$index)"
              :class="['upload_file', {'none': showFileList(scope.$index)?.length}]"
              :before-upload="(file)=>gghandleBeforeUpload(file,scope.$index)" :on-change="gghandleChange"
              :on-remove="()=>gghandleRemove(scope.$index)">
              <i class="el-icon-plus"></i>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column align="center" label="包装中件数" min-width="140">
          <template v-slot="{row}">
            <el-input v-model.trim="row.SKU_Quantity" placeholder="请输入包装中件数"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="包装单位" min-width="140">
          <template v-slot="{row}">
            <el-select clearable v-model.trim="row.Size" placeholder="请选择包装单位" filterable style="width: 100%">
              <el-option v-for="(item,index) in bzdw" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="步长" min-width="140">
          <template v-slot="{row}">
            <el-input v-model.trim="row.Step_Size" placeholder="请输入指定步长"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="起批量" min-width="140">
          <template v-slot="{row}">
            <el-input v-model.trim="row.Start_number" placeholder="请输入起批量"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="sku单价" min-width="140">
          <template v-slot="{row}">
            <el-input v-model.trim="row.Unit_Price" placeholder="请输入sku单价"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_titel">
        <div class="titel">商品主图</div>
      </div>
      <div style="display: flex">
        <el-upload drag :file-list="zfileList" multiple list-type="picture" :before-upload="zhandleBeforeUpload"
          :on-change="zhandleChange" :on-remove="zhandleRemove">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
      <div class="table_titel">
        <div class="titel">商品详情图</div>
      </div>
      <div style="display: flex">
        <el-upload drag :file-list="xfileList" multiple list-type="picture" :before-upload="xhandleBeforeUpload"
          :on-change="xhandleChange" :on-remove="xhandleRemove">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
        <div style="display: flex; width: 100%">
          <!-- 配置 -->
          <div id="Detail_Image" style="
                width: 300px;
                flex-shrink: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
              ">
            <div class="preview" :style="{borderColor:isDetailSort?'#67C23A':'#F5F5F5'}"
              v-for="(item,index) in Detail_Image.filter(i=>i.id==0)" :key="index">
              <el-image :ref="'Detail'+index" :preview-src-list="[item.Base64]" class="el-upload-list__item-thumbnail"
                fit="contain" :src="item.Base64" style="width: 148px; height: 148px"></el-image>
              <span v-show="!isDetailSort" class="el-upload-list__item-actions">
                <span @click="handleImgClick('Detail'+index)" style="cursor: pointer"><i
                    class="el-icon-zoom-in"></i></span>
                <span @click="RemoveImage('Detail_Image',index)" style="cursor: pointer"><i
                    class="el-icon-delete"></i></span>
              </span>
              <i v-show="isDetailSort" class="el-icon-rank Sort"></i>
            </div>
          </div>
          <!-- 预览 -->
          <div style="
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
              ">
            <h1 v-show="Detail_Image.filter(i=>i.id==0).length>0">
              详情图预览
            </h1>
            <el-image v-for="(item,index) in Detail_Image.filter(i=>i.id==0)" :key="item" fit="contain"
              :src="item.Base64" style="width: 100%; max-width: 600px"></el-image>
          </div>
        </div>
      </div>
      <div class="table_titel">
        <div class="titel">检测报告</div>
      </div>
      <div style="display: flex">
        <el-upload drag :file-list="jcfileList" multiple list-type="picture" :before-upload="jchandleBeforeUpload"
          :on-change="jchandleChange" :on-remove="jchandleRemove">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
        <div id="Main_Image" style="
              margin-left: 10px;
              width: 100%;
              display: flex;
              flex-wrap: wrap;
            ">
          <div class="preview" :style="{borderColor:isMainSort?'#67C23A':'#F5F5F5'}"
            v-for="(item,index) in Main_Image.filter(i=>i.id==0)" :key="index">
            <el-image :ref="'Main'+index" :preview-src-list="[item.Base64]" class="el-upload-list__item-thumbnail"
              fit="contain" :src="item.Base64" style="width: 148px; height: 148px"></el-image>
            <span v-show="!isMainSort" class="el-upload-list__item-actions">
              <span @click="handleImgClick('Main'+index)" style="cursor: pointer"><i class="el-icon-zoom-in"></i></span>
              <span @click="RemoveImage('Main_Image',index)" style="cursor: pointer"><i
                  class="el-icon-delete"></i></span>
            </span>
            <i v-show="isMainSort" class="el-icon-rank Sort"></i>
          </div>
        </div>
      </div>
      <div style="height: 90px"></div>
      <el-form-item class="form-operation">
        <el-button @click="window.history.back()">返回</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
  <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
  <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
  <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../utils/vue.min.js"></script>
  <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
  <script type="text/javascript" src="../../../utils/Sortable.min.js"></script>
  <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
  <script type="text/javascript" src="../../../component/component.js"></script>
  <script type="text/javascript" src="../../../config/config.js"></script>
  <script type="text/javascript" src="../../../utils/compressor.js"></script>
  <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
  <script type="text/javascript" src="../../../utils/utils.js"></script>
  <script type="text/javascript" src="js/edit2.js"></script>
</body>

</html>